<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2986739_m1ci5w2fid.css">
    <link rel="stylesheet" href="../css/list.css">
    <script src="../js/flexible.js"></script>
<<<<<<< HEAD
    <link rel="icon" href="../images/favicon.ico" type="images/x-icon">

=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
</head>

<body>
    <div class="allhead">
        <div class="head">
            <div class="head1">
                <span>你好，欢迎来到海澜之家！</span>
                <div class="head1son">
                    <a href="../html/login.html"><b>请登录</b></a>
                    <a href=""><b>合作账号登录</b>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-social-qq"></i>
                    </a>
                    <a href="../html/zhuce.html"><b>免费注册</b></a>
                </div>
                <div class="show">
                    <span class="show-phone">欢迎:</span>
                    <a href="" class="over">退出</a>
                </div>
            </div>
            <div class="head2">
                <div class="head2son">
                    <a href="" class="">我的海澜之家</a>
                    <a href="" class="">在线客服</a>
                    <a href="../html/cart.html" class="">我的购物袋</a>
                    <a href="" class="">帮助</a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="nav">
            <div class="wrapson">
                <a href=""><span>附近门店</span></a>
            </div>
            <div class="wrap1son">
                <a href=""><img src="../images/1.png" alt=""></a>
            </div>
            <div class="wrap2son">
                <input type="text" class="sousuo" value="大闹天宫">
                <i class="iconfont icon-sousuo"></i>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul>
            <a href="../html/shouye.html">
                <li>首页</li>
            </a>
            <a href="">
                <li>2021夏季热卖</li>
            </a>
            <a href="">
                <li>明星同款</li>
            </a>
            <a href="">
                <li>IP联名</li>
            </a>
            <a href="">
                <li>国民臻品</li>
            </a>
            <a href="">
                <li>2021秋季新品</li>
            </a>
        </ul>
    </div>
    <div class="main">
        <div class="subject">
            <ul class="cat-tree">
                <li class="fst-cat">
                    <h4 class="fst-cat-hd"><a href="">查看所有宝贝</a></h4>
                    <ul class="fst-cat-bd">
                        <a href="">按综合</a>
                        <a href="" class="forsale">按销量</a>
                        <a href="">按新品</a><br>
                        <a href="" class="asc">按价格</a>
                    </ul>
                </li>
                <li class="fst-cat">
                    <h4 class="fst-cat-hd"><a href="">2021夏季热卖</a></h4>
                    <ul class="fst-cat-bd">
                        <li class="snd-cat">
                            <a href="">
                                <h4>短袖T恤</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>POLO</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>短袖衬衫</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>长袖衬衫</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>休闲卫衣</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>休闲中裤</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>牛仔中裤</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>休闲裤</h4>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="fst-cat">
                    <h4 class="fst-cat-hd"><a href="">其他</a></h4>
                    <ul class="fst-cat-bd">
                        <li class="snd-cat">
                            <a href="">
                                <h4>IP联名款</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>明星同款</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>国民臻品</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>儿童系列</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>上装</h4>
                            </a>
                        </li>
                        <li class="snd-cat">
                            <a href="">
                                <h4>下装</h4>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="fst-cat">
                    <h4 class="fst-cat-hd"><a href="">2021秋季新品</a></h4>
                </li>
            </ul>
            <div class="list-right">
                <div class="sort">
                    <div class="sortson">
                        <span class="asc">价格升</span><span class="desc">价格降</span>
                    </div>
                    <!-- <div class="sortson1">
                        <i>1/3</i>
                        <span>&lt;</span><span>&gt;</span>
                    </div> -->
                </div>
                <ul class="goods">
                    <!-- <li>
                        <img src="../images/11.jpg" alt="">
                        <div class="theme">
                            <img src="../images/11.jpg" alt="">
                            <img src="../images/12.jpg" alt="">
                            <img src="../images/13.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/14.jpg" alt="">
                        <div class="theme">
                            <img src="../images/14.jpg" alt="">
                            <img src="../images/15.jpg" alt="">
                            <img src="../images/16.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/17.jpg" alt="">
                        <div class="theme">
                            <img src="../images/17.jpg" alt="">
                            <img src="../images/18.jpg" alt="">
                            <img src="../images/19.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/20.jpg" alt="">
                        <div class="theme">
                            <img src="../images/20.jpg" alt="">
                            <img src="../images/21.jpg" alt="">
                            <img src="../images/22.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/23.jpg" alt="">
                        <div class="theme">
                            <img src="../images/23.jpg" alt="">
                            <img src="../images/24.jpg" alt="">
                            <img src="../images/25.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/26.jpg" alt="">
                        <div class="theme">
                            <img src="../images/26.jpg" alt="">
                            <img src="../images/27.jpg" alt="">
                            <img src="../images/28.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/29.jpg" alt="">
                        <div class="theme">
                            <img src="../images/29.jpg" alt="">
                            <img src="../images/30.jpg" alt="">
                            <img src="../images/31.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li>
                    <li>
                        <img src="../images/32.jpg" alt="">
                        <div class="theme">
                            <img src="../images/32.jpg" alt="">
                            <img src="../images/33.jpg" alt="">
                            <img src="../images/34.jpg" alt="">
                        </div>
                        <h4 class="goods-price">￥98.00</h4>
                        <p>
                            HLA海澜之家含新疆棉短袖T恤2021夏季新品时尚印花微弹透气t恤男HNTBJ2D036A</p>
                        <span>总销量:</span><span class="goods-sale">6</span>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/api.js"></script>
<script>
<<<<<<< HEAD

    const phone = localStorage.getItem('phone');
    console.log(phone);
    if (phone) {
        $('.head1son').css({ 'display': 'none' }).removeClass()
        $('.show').css({ 'display': 'block' })
        $('.show-phone').eq(0).html(`欢迎您:${phone}`)
    }

    $('.over').on('click', function () {
        localStorage.removeItem('phone')
        location.reload();
    })





=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
    let kw = '';
    let sortName = 'goods_id';
    let sortType = '';

    Duke()

    // 搜索
    $('.icon-sousuo').click(function () {
        kw = $('.sousuo').val();
        Duke()
    })

    $('.asc').click(function () {
        sortName = 'goods_price';
        sortType = 'asc';
        Duke()
    })

    $('.desc').click(function () {
        sortName = 'goods_price';
        sortType = 'desc';
        Duke()
    })




    async function Duke() {
        const res = await olist({
            kw,
            sortName,
            sortType
        })
        console.log(res);
        const { status, msg, data: list } = res;
        if (status) {
            let str = '';
            list.forEach(v => {
                let resl = v.smallimg.split(',');
                console.log(resl);
                str += `<li>
                        <a href="./detail.html?id=${v.id}">
                        <img src="${v.img}" alt="">
                        </a>
                        <div class="theme">
                            <img src="${resl[0]}" alt="">
                            <img src="${resl[1]}" alt="">
                            <img src="${resl[2]}" alt="">
                        </div>
                        <h4 class="goods-price">${'￥' + v.price}</h4>
                        <p>${v.title}</p>
                        <span>总销量:</span><span class="goods-sale">${v.sale}</span>
                    </li>`
            });
            $('.goods').html(str);
        } else {
            alert(msg)
        }
    }



    $('.goods').on('click', '.theme img', function () {
        console.log(this);
        let a = $(this).parent().prev().children().attr('src', this.src);
        console.log(a);
    })





</script>

</html>